<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
    <style>
        body{
            position: relative;
        }
        canvas{
            position: absolute;
            top:0px;
            left:0px;
            border:1px solid red;
        }
    </style>
</head>
<body>
<canvas width="800" height="600" id="canvasTop"></canvas>
<canvas id="canvasBottom" width="800" height="600"></canvas>
</body>
<script src="jquery-2.1.4.js"></script>
<script>
    var canvasTop = document.getElementById("canvasTop");
    var ctxTop = canvasTop.getContext("2d");

    var bigRadius=150;
    var smallRadius=50;

    var start=-Math.PI/2;
    var start2=0;
    var start3=2*Math.PI/3;
    ctxTop.fillStyle="pink";
    ctxTop.textAlign="center";
    ctxTop.textBaseline="middle";
    ctxTop.font="18px Microsoft Yahei";


    var timerFn=function(){
        ctxTop.beginPath();
        ctxTop.clearRect(0,0,canvasTop.width,canvasTop.height);
        var x1=Math.sin(-start)*bigRadius;
        var y1=Math.cos(-start)*bigRadius;
        var x2=300+y1;
        var y2=300-x1;
        ctxTop.arc(x2,y2,smallRadius,0,2*Math.PI);
        ctxTop.fillStyle="pink";
        ctxTop.fill();

        ctxTop.fillStyle="black";
        ctxTop.fillText("Angular",x2,y2);

        ctxTop.beginPath();

        var x1=Math.sin(-start2)*bigRadius;
        var y1=Math.cos(-start2)*bigRadius;
        var x2=300+y1;
        var y2=300-x1;
        ctxTop.arc(x2,y2,smallRadius,0,2*Math.PI);
        ctxTop.fillStyle="lightblue";
        ctxTop.fill();

        ctxTop.fillStyle="red";
        ctxTop.fillText("React",x2,y2);

        ctxTop.beginPath();

        var x1=Math.sin(-start3)*bigRadius;
        var y1=Math.cos(-start3)*bigRadius;
        var x2=300+y1;
        var y2=300-x1;
        ctxTop.arc(x2,y2,smallRadius,0,2*Math.PI);
        ctxTop.fillStyle="lightgreen";
        ctxTop.fill();

        ctxTop.fillStyle="blue";
        ctxTop.fillText("Ionic",x2,y2);

        start+=0.002*Math.PI;
        start2+=0.002*Math.PI;
        start3+=0.002*Math.PI;


    };
    var timer=setInterval(timerFn,5);


    $("canvas").on("mouseenter",function(){
        clearInterval(timer);
        timer=setInterval(timerFn,30);
    }).on("mouseleave",function(){
        clearInterval(timer);
        timer=setInterval(timerFn,5);
    });


    var canvasBottom = document.getElementById("canvasBottom");
    var ctxBottom = canvasBottom.getContext("2d");
    ctxBottom.arc(300,300,bigRadius,0,2*Math.PI);
    ctxBottom.stroke();
</script>
</html>